<nav class="bg-dark mb-4 navbar navbar-dark navbar-expand-md">
  <a [routerLink]="['/home']" class="navbar-brand">
    <em>Azure B2C OIDC Code Flow with PKCE</em>
  </a>
  <button
    aria-controls="navbarCollapse"
    aria-expanded="false"
    aria-label="Toggle navigation"
    class="navbar-toggler"
    data-target="#topNavbarCollapse"
    data-toggle="collapse"
    type="button"
    >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="topNavbarCollapse">
    <ul class="mr-auto navbar-nav">
      @if (isAuthenticated) {
        <li class="nav-item">
          <a [routerLink]="['/protected']" class="nav-link">Protected</a>
        </li>
      }
      <li class="nav-item">
        <a [routerLink]="['/home']" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        @if (!isAuthenticated) {
          <a class="nav-link" (click)="login()">Login</a>
        }
      </li>
      <li class="nav-item">
        @if (isAuthenticated) {
          <a class="nav-link" (click)="logout()"
            >Logout</a
            >
          }
        </li>
        <li class="nav-item">
          @if (isAuthenticated) {
            <a class="nav-link" (click)="refreshSession()"
              >Refresh Session</a
              >
            }
          </li>
        </ul>
        <ul class="navbar-nav"></ul>
      </div>
    </nav>
